<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="list"
      :row-key="(record) => record.id"
      :scroll="{ y: 420 }"
      :pagination="false"
    >
      <span slot="select" slot-scope="text, record">
        <a-radio :checked="record.isChecked" @click="change(record)"></a-radio>
      </span>

      <span slot="name" slot-scope="text, record">
        <div class="imgTxt">
          <a-avatar :src="record.icon" shape="square" :size="48" icon="user" />
          <div class="txt">
            <div class="tit">
              <a-tooltip>
                <template slot="title">
                  {{ record.name }}
                </template>
                {{ record.name }}
              </a-tooltip>
            </div>
          </div>
        </div>
      </span>
    </a-table>
  </div>
</template>

<script>
import { getUrlParam, getDiyURLText } from '@/utils/utils.js'
import { getStoreCategory } from '@/api/diy'

const columns = [
  {
    title: '选择',
    scopedSlots: {
      customRender: 'select',
    },
    width: 60,
  },
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100,
  },
  {
    title: '分类信息',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
]

export default {
  data() {
    return {
      columns,
      list: [],

      catList: [],
    }
  },

  props: {
    link: {
      type: Object,
      default() {
        return null
      },
    },

    mchId: {
      type: Number,
      default: 0,
    },

    params: {
      type: Object,
      default() {
        return {}
      },
    },

    type: {
      type: String,
      default: '',
    },
  },

  created() {
    this.getList()
  },

  methods: {
    updateParam(value, type) {
      this.queryParam[type] = value
      this.getList()
    },

    // 获取数据列表
    async getList() {
      if (getUrlParam('store_id')) this.store_id = getUrlParam('store_id')
      const hide = this.$message.loading('加载中', 0)
      let { mch_id } = this

      const res = await getStoreCategory({
        is_show: -1,
        mch_id,
      })

      if (res.code == 0) {
        let list = res.data.list || []

        list = list.map((el) => {
          el.isChecked = false
          return el
        })
        this.list = list
      }

      hide()
    },

    change(item) {
      let link = getDiyURLText(this.link, item)

      this.$emit('handle', 'link', link)

      this.$nextTick(() => {
        this.list.forEach((el) => {
          el.isChecked = false
        })
        item.isChecked = true
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.table-page-search-box {
  padding-bottom: 24px;
}

::v-deep {
  .ant-form-item {
    display: flex;
    align-items: center;
  }

  .ant-form-item-control-wrapper {
    flex: 1;
  }

  .ant-form-item-control {
    line-height: 32px;
  }
}

.flex {
  display: flex;
  align-items: center;
}

.imgTxt {
  display: flex;
  width: 100%;

  .txt {
    margin: 2px 0 0 10px;
    flex: 1;
    overflow: hidden;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  .tit,
  .attr {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
